<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>

    <div id="app">
        <h2>{{title}}</h2>
        <div v-if="false">
            <button v-on:click.once="countAdd">countAdd--{{count}}</button>
            <button @click="greet('六一儿童节快乐')">六一儿童节快乐</button>
            <button @click="getEvent">获取事件对象 event</button>
            <button @click="getEvent($event)">获取事件对象 event2</button>
            <h2>word--{{word}}</h2>
            <p>
                <input type="text" placeholder="change" @change="changeWord">
            </p>
            <p>
                <input type="text" placeholder="input" @input="changeWord">
            </p>

            <p>
                <input type="text" placeholder="keyup" @keyup.enter.space.a.b="getKeyCode">
            </p>
            <p>
                <input type="text" placeholder="keydown" @keydown.left.right="getKeyCode">
            </p>
            <p>
                <input type="text" placeholder="keypress" @keypress.13.32="getKeyCode">
            </p>

            <div @mousemove="getClient" @touchmove="getClient" :style="{width:'200px',height:'200px',background:'red'}">
                获取坐标
            </div>

            <div class="parent" @click="parent">
                <h2 @click.prevent="func1">
                    event.preventDefault() 阻止浏览器的默认事件
                </h2>
                <h2 @click.stop="func2">
                    event.stopPropagation() 阻止事件冒泡
                </h2>
                <h2>今天的天气真的适合睡懒觉</h2>
            </div>
        </div>

        <div>
            <h2>过滤器</h2>
            <h2>word--{{word | upper}}</h2>
            <h2 :data-word="word | lower">{{word | lower}}</h2>
            <h2>num--{{num | toFix(2)}}</h2>
            <h2>n--{{n | format(8)}}</h2>
            <h2>tel -- {{tel | telFormat}}</h2>
            <h2>time -- {{time | timeFormat('-')}}</h2>
            <h2>money = {{money | currency}}</h2>
        </div>
    </div>

    <script>
        //全局过滤
        Vue.filter('upper', (value) => {
            if (!value) return '';
            return value.toUpperCase()
        })

        Vue.filter('toFix', (value, n = 2) => {
            if (!value) return '';
            return (value * 1).toFixed(n)
        })
        // 进制转换  toString()
        Vue.filter("format", (value, n = 10) => {
            if (!value) return ''
            return value.toString(n)
        })

        //手机号
        Vue.filter('telFormat', (value, str = '-') => {
            if (!value) return ''
            value = value.toString().split('')
            value.splice(3, 0, str)
            value.splice(8, 0, str)
            return value.join('')
        })

        Vue.filter('timeFormat', (value, str = '/') => {
            if (!value) return '';
            var time = new Date(value)
            var year = time.getFullYear()
            var month = time.getMonth() + 1
            var day = time.getDate()
            var hour = time.getHours()
            var min = time.getMinutes()
            var sec = time.getSeconds()
            return `${year}${str}${month}${str}${day} ${hour}:${min}:${sec}`
        })

        //货币(千位加 , )

        Vue.filter('currency', (value, type = '$', n = 3) => {
            if (!value) return '';
            value = value.toString().split(".")
            console.log(value);
            let zs = value[0];
            let xs = value[1];
            console.log(zs,xs);
            zs = zs.toString().split('').reverse();
            zs = zs.map((v, i) => {
                if (i % 3 == 0 && i != 0) {
                    v = v + ','
                    console.log(v);
                }
                return v
            })
            console.log(zs);
            console.log(zs.reverse());
            return zs.reverse().join('') + '.' + xs;


        })


        const vm = new Vue({
            data: {
                title: "v-on 事件处理",
                count: 1000,
                word: "WH2204-daydayup-YYDS",
                num: '1314.5261',
                n: 255,
                tel: 18012346789,
                time: new Date(),
                money: 12345678912312.138
            },
            //局部过滤器
            filters: {
                lower(value) {
                    if (!value) return '';
                    return value.toLowerCase();
                }
            },

            methods: {
                countAdd() {
                    this.count++
                },
                greet(msg) {
                    console.log(msg);
                },
                getEvent(e) {
                    console.log(e);
                },
                changeWord(e) {
                    this.word = e.target.value
                },
                getClient(e) {
                    // PC
                    console.log(e.clientX)
                    console.log(e.clientY)

                    // mobile 移动端
                    // console.log(e.touches[0].clientX)
                    // console.log(e.touches[0].clientY)
                },
                parent() {
                    console.log('I am parent ');
                },
                func1() {
                    console.log('我是阻止浏览器的默认事件,我不会阻止事件冒泡');
                },
                func2() {
                    console.log('我一定会阻止事件冒泡');
                }

            },
            mounted() {
                document.getElementsByTagName('title')[0].innerHTML = this.title;
            },

        }).$mount('#app')


    </script>

 <!-- 
        用特殊变量 $event
        函数调用时候的参数 是 实参
        函数定义时候的参数 是 形参 

        $event vue 提供的事件对象 参数 

        事件修饰符
        event.preventDefault()  阻止浏览器的默认事件
        event.stopPropagation()  阻止事件冒泡 

        v-on 提供了事件修饰符 
        .stop        阻止单击事件继续传播  
        .prevent     阻止浏览器的默认事件  
        .capture     
        .self
        .once        这个事件只能触发一次 
        .passive

        按键修饰符   键盘事件 (键盘码)
        enter    13 
        right    37 
        left
        space     32    
        up
        down 

        v-on:click  @click       
        input 
        change
        click
        dbclick
        keyup
        keydown
        keypress
        mousemove
        mousedown
        mouseup
        mouseenter
        mouserleave 
        touchstart   后面再讲 手机端的触摸事件 
        touchmove
        touchend

        原生绑定事件 (DOMO级事件  DOM2级 事件 )
        onclick="do()"  DOM0  
        document.getElementyById("box").onclick = fn;
        addEventListener("click",fn,false/true)  默认 false  false 冒泡   true 捕获   DOM2 
        removeEventListener("click")

        jquery 绑定事件 
        on  /  off   $('.box').on('click')
        bind  /  unbind  $('.box').bind('click')
        click()

        事件委托   ===> 基于事件冒泡的原理 把子元素的触发 父元素代替子元素执行 (给未来元素绑定事件 把事件绑定到父元素上去)
        $(parent).on('click',child,fn);    
        $(parent).delegate(child,'click',fn);   // 委托 

        过滤器  filter 
        Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化  (日期格式 货币格式)
        过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 
        “管道”符号指示   |
        
        Vue.filter 全局过滤器 
        filters 局部过滤器 

     -->


</body>

</html>